﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui</title>
    <link href="../../../css/Hui.css" rel="stylesheet" type="text/css" />
    <style type="text/css"></style>
</head>
<body>
    <p class="H-padding-horizontal-both-10 H-font-size-16 H-text-align-center">亲，你给Hui打几分？</p>
    <div class="H-padding-10 H-text-align-center star">
        <i class="H-iconfont H-icon-star-null H-theme-font-color4 H-font-size-18 H-margin-horizontal-right-5"></i><i class="H-iconfont H-icon-star-null H-theme-font-color4 H-font-size-18 H-margin-horizontal-right-5"></i><i class="H-iconfont H-icon-star-null H-theme-font-color4 H-font-size-18 H-margin-horizontal-right-5"></i><i class="H-iconfont H-icon-star-null H-theme-font-color4 H-font-size-18 H-margin-horizontal-right-5"></i><i class="H-iconfont H-icon-star-null H-theme-font-color4 H-font-size-18 H-margin-horizontal-right-5"></i>
    </div>
    <p class="H-padding-horizontal-both-10 H-font-size-16 H-text-align-center">打分结果：<span class="H-theme-font-color-red result"></span></p>
    <script src="../../../script/H.js" type="text/javascript"></script>
    <script type="text/javascript">
        var score = 0;
        var stars = H.Ds("i.H-iconfont", ".star");

        for (var i = 0; i < stars.length; i++) {
            var star = stars[i];
            star.addEventListener("touchend", function (event) {
                var that = event.target;
                var index = H.getIndex(that);
                var checked = that.getAttribute("checked");
                if (checked) {
                    var flag = false;
                    for (var m = index + 1; m < stars.length; m++) {
                        var temp = H.D("i.H-iconfont:nth-child(" + (m + 1) + ")", ".star");
                        if (temp.classList.contains("H-icon-star-fill")) {
                            flag = true;
                            break;
                        }
                    }
                    score = index + 1;

                    if (flag == false) {
                        that.removeAttribute("checked");
                        that.className = that.className.replace("H-icon-star-fill", "H-icon-star-null");
                        score = index;
                    }

                    //// 设置后面都取消
                    for (var m = index + 1; m < stars.length; m++) {
                        var temp = H.D("i.H-iconfont:nth-child(" + (m + 1) + ")", ".star");
                        temp.removeAttribute("checked");
                        temp.className = temp.className.replace("H-icon-star-fill", "H-icon-star-null");
                    }
                }
                else {
                    that.setAttribute("checked", "checked");
                    that.className = that.className.replace("H-icon-star-null", "H-icon-star-fill");
                    // 设置前面都选中
                    for (var n = 0; n < index; n++) {
                        var temp = H.D("i.H-iconfont:nth-child(" + (n + 1) + ")", ".star");
                        temp.setAttribute("checked", "checked");
                        temp.className = temp.className.replace("H-icon-star-null", "H-icon-star-fill");
                    }
                    score = index + 1;
                }

                switch (score) {
                    case 0:
                        H.D(".result").innerText = "呜呜，一分都不给我！（0 分）"
                        break;
                    case 1:
                        H.D(".result").innerText = "这一分不轻不重啊！（1分）"
                        break;
                    case 2:
                        H.D(".result").innerText = "我绝对不是个2B！绝对不是！（2 分）"
                        break;
                    case 3:
                        H.D(".result").innerText = "哇，合格了耶！（3 分）"
                        break;
                    case 4:
                        H.D(".result").innerText = "基本算优秀了，心情爆爽！（4 分）"
                        break;
                    case 5:
                        H.D(".result").innerText = "别这样，我会骄傲的！（5 分）"
                        break;
                }
            });
        }
    </script>
</body>
</html>